<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
    :class="iconClass">
    <path
      d="M11.731 2.5451C11.841 2.32212 12.159 2.32212 12.269 2.5451L14.8691 7.81348C14.9128 7.90203 14.9973 7.9634 15.095 7.97759L20.909 8.82242C21.1551 8.85818 21.2533 9.16057 21.0753 9.33413L16.8682 13.435C16.7975 13.5039 16.7653 13.6032 16.7819 13.7005L17.7751 19.4911C17.8171 19.7361 17.5599 19.923 17.3398 19.8073L12.1396 17.0734C12.0522 17.0274 11.9478 17.0274 11.8604 17.0734L6.66019 19.8073C6.4401 19.923 6.18287 19.7361 6.2249 19.4911L7.21806 13.7005C7.23475 13.6032 7.20248 13.5039 7.13178 13.435L2.92472 9.33413C2.74666 9.16057 2.84492 8.85818 3.09098 8.82242L8.90499 7.97759C9.00271 7.9634 9.08718 7.90203 9.13087 7.81348L11.731 2.5451Z"
      :stroke="color"
      :fill="fill"
      :stroke-width="strokeWidth" />
  </svg>
</template>

<script setup lang="ts">
  interface Props {
    size?: number | string;
    color?: string;
    fill?: string;
    strokeWidth?: number | string;
    iconClass?: string;
  }

  withDefaults(defineProps<Props>(), {
    size: 24,
    color: '#F76B1B',
    fill: 'none',
    strokeWidth: 1,
    iconClass: '',
  });
</script>
